import React, { useEffect, useState } from "react"
import "./Reply.scss"
import { LeftOutline } from "antd-mobile-icons"
import { Popup, TextArea, Toast } from "antd-mobile"
import { Icon } from "./Icon"
import { useDispatch, useSelector } from "react-redux"
import {
  getCommentList,
  publishReply,
  likeReply,
  CommentFollow
} from "../store/actions"
import dayjs from "dayjs"
function Reply({ comment, close, likeComment }) {
  const dispatch = useDispatch()
  const {
    com_id,
    aut_name,
    aut_id,
    content,
    pubdate,
    like_count,
    is_liking,
    is_followed
  } = comment
  useEffect(() => {
    dispatch(getCommentList({ type: "c", source: com_id }))
  }, [com_id, dispatch])
  const [replyVisible, setReplyVisible] = useState(false)
  const [replyValue, setReplyValue] = useState("")

  const { reply } = useSelector((state) => state.article)
  // 回复评论
  const publishReplys = () => {
    if (replyValue.trim() === "") {
      Toast.show({
        icon: "fail",
        content: "回复失败"
      })
      return
    }
    dispatch(publishReply(com_id, replyValue, aut_id))
    // 清除输入框
    setReplyValue("")
    setReplyVisible(false)
  }
  // 回复点赞
  const handleLikeReply = (id, liking, item) => {
    dispatch(likeReply(id, liking))
  }
  // 关注
  const handleFollow = () => {
    dispatch(CommentFollow(aut_id, is_followed))
  }

  return (
    <div>
      <div className="navtop">
        <span onClick={() => close()}>
          <LeftOutline />
        </span>
        <p>{reply.total_count}条回复</p>
      </div>
      <div className="reply">
        <div className="item">
          <div className="head">
            <img
              src={"http://geek.itheima.net/images/user_head.jpg"}
              alt=""
            ></img>
          </div>
          <div className="info">
            <p className="name">
              {aut_name}
              <span className="follow" onClick={handleFollow}>
                {is_followed ? "已关注" : "关注"}
              </span>
            </p>
            <p className="text">{content}</p>
            <p className="time">
              {dayjs().to(dayjs(pubdate))}
              <span onClick={() => likeComment()}>
                {like_count}
                <Icon type={is_liking ? "iconbtn_like_sel" : "iconbtn_like2"} />
              </span>
            </p>
          </div>
        </div>
        <div className="replyList">
          <p className="allReply">全部回复</p>
          {reply.total_count === 0 ? (
            <div className="replyNone">
              <img
                src="http://geek.itheima.net/dist/img/none.21d1f2fd.png"
                alt=""
              ></img>
              <p>还没有人评论哦</p>
            </div>
          ) : (
            <div className="replyList">
              {reply.results?.map((item) => {
                return (
                  <div key={item.com_id} className="replyItem">
                    <div className="item">
                      <div className="head">
                        <img
                          src={
                            item.aut_photo ||
                            "http://geek.itheima.net/images/user_head.jpg"
                          }
                          alt=""
                        ></img>
                      </div>
                      <div className="info">
                        <p className="time">
                          {item.aut_name}
                          <span>
                            {item.like_count}
                            <Icon
                              onClick={() =>
                                handleLikeReply(
                                  item.com_id,
                                  item.is_liking,
                                  item
                                )
                              }
                              type={
                                item.is_liking
                                  ? "iconbtn_like_sel"
                                  : "iconbtn_like2"
                              }
                            />
                          </span>
                        </p>
                        <p className="text">{item.content}</p>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </div>
        <div className="comment-bottom">
          <div className="input-btn" onClick={() => setReplyVisible(true)}>
            <Icon type="iconbianji" />
            <span>抢沙发</span>
          </div>
          <Popup
            visible={replyVisible}
            onMaskClick={() => {
              setReplyVisible(false)
            }}
            bodyStyle={{ height: "100%" }}
          >
            <div className="navtop">
              <span onClick={() => setReplyVisible(false)}>
                <LeftOutline />
              </span>
              <p>回复评论</p>
              <div className="publish" onClick={publishReplys}>
                发表
              </div>
            </div>
            <div className="commentActive">
              <TextArea
                placeholder={"@" + aut_name}
                value={replyValue}
                onChange={(value) => setReplyValue(value)}
              ></TextArea>
            </div>
          </Popup>
          <div className="action-item">
            <Icon type="iconbtn_collect" />
            <p>收藏</p>
          </div>
          <div className="action-item">
            <Icon type="iconbtn_share" />
            <p>分享</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Reply
